<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false" @on-click="clickTabs">
	
				<ButtonGroup slot="extra">
					  <template v-if="tabsName === 'carType'">
					    <Button type="primary" size="small" @click="addCarType">添加类型</Button>
					</template>
					<template v-if="tabsName === 'carBrand'">
					    <Button type="primary" size="small" @click="addCarBrand">添加品牌</Button>
					</template>
					<Button type="primary" size="small" icon="md-refresh" @click="refreshData"></Button>
				</ButtonGroup>
	
				<TabPane label="车辆类型列表" name="carType">
					<Table border :columns="carType.columnsType" :data="carType.dataType" :loading="carType.loadingType"></Table>
					<div style="margin: 10px;overflow: hidden">
						<div style="float: right;">
							<Page :total="carType.totalType" :current="1" show-sizer show-total transfer @on-change="changeTypePage"
							 @on-page-size-change="changeTypeSizePage"></Page>
						</div>
					</div>
				</TabPane>
				
				<TabPane label="车辆品牌列表" name="carBrand">
						<Table border :columns="carBrand.columnsBrand" :data="carBrand.dataBrand" :loading="carBrand.loadingBrand"></Table>
						<div style="margin: 10px;overflow: hidden">
							<div style="float: right;">
								<Page :total="carBrand.totalBrand" :current="1" show-sizer show-total transfer @on-change="changeBrandPage"
								 @on-page-size-change="changeBrandSizePage"></Page>
							</div>
						</div>
				</TabPane>
			</Tabs>
		</Card>
	<carTypeOpe ref="carTypeOpe" :type='carType.carTypeOpeType' @table='queryCarTypeList'></carTypeOpe>
	 <carBrandOpe ref="carBrandOpe" :type='carBrand.modalType' @table='queryCarBrandList'></carBrandOpe> 
		</div>
</template>

<script>
	import carTypeOpe from './carTypeOpe'
	import carBrandOpe from './carBrandOpe'
		import {
			formatDate
		} from '../utils/time.js'
		
		export default {
			name: "info",
			 components: {
			  carTypeOpe,
			  carBrandOpe
			},
			data() {
				return {
					//tab点击之后的名称
					tabsName: 'carType',
					carType: {
						carTypeOpeType: '',
						totalType: 0,
						loadingType: false,
						paramsType: {
							pageNo: '1',
							pageSize: '10'
						},
						columnsType: [{
								title: '序号',
								type: 'index',
								width: 80,
								align: 'center'
							},
							{
								title: '类型名称',
								key: 'typeName',
								minWidth: 120
							},
							{
								title: '日期',
								key: 'createTime',
								minWidth: 100,
								align: 'center',
								render: (h, params) => {
									return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
								}
							},
							{
								title: '操作',
								minWidth: 150,
								 key:'action',
								 render:(h,params)=>{
								    return h('div',[
										   h('Button',{
										    props:{
										        type:'error',
										        size:'small'
										    },
										    on:{
										        click:()=>{
													// 删除管理员
													this.delCarType(params);
										           
										        }
										    }
										},'删除'),
								        h('Button',{
								            props:{
								                type:'primary',
								                size:'small'
								            },
								            style:{
								                marginLeft:'10px'
								            },
								            on:{
								               click:()=>{
												this.editCarType(params);
								               }
								            }
								        },'编辑')
								    ])
								}
							}
						],
						dataType: []
					},
					carBrand: {
						totalBrand: 0,
						loadingBrand: false,
						paramsBrand: {
							pageNo: '1',
							pageSize: '10'
						},
						columnsBrand: [{
								title: '序号',
								type: 'index',
								width: 80,
								align: 'center'
							},
							{
								title: '品牌名称',
								key: 'brandName',
								minWidth: 120
							},
							{
								title: '日期',
								key: 'createTime',
								minWidth: 100,
								align: 'center',
								render: (h, params) => {
									return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
								}
							},
							{
								title: '操作',
								minWidth: 150,
								 key:'action',
								 render:(h,params)=>{
								 return h('div',[
								 	   h('Button',{
								 	    props:{
								 	        type:'error',
								 	        size:'small'
								 	    },
								 	    on:{
								 	        click:()=>{
								 				// 删除品牌
								 				this.delCarBrand(params);
								 	           
								 	        }
								 	    }
								 	},'删除'),
								     h('Button',{
								         props:{
								             type:'primary',
								             size:'small'
								         },
								         style:{
								             marginLeft:'10px'
								         },
								         on:{
								            click:()=>{
								 			 this.editCarBrand(params);
								            }
								         }
								     },'编辑')
								 ])
								}
							}
						],
						dataBrand: [],
						modalType: ''
					},
					
	
				
				}
			},
			mounted() {
				// 查询类型列表
				this.queryCarTypeList();
			},
			methods: {
				refreshData() {
					this.$refs['tableView'].getData()
				},
				//添加车辆类型
				addCarType(){
					this.carType.carTypeOpeType = 'add'
					this.$refs.carTypeOpe.show();
				},
				//修改车辆类型
				editCarType(res){
					this.carType.carTypeOpeType = 'edit'
					this.$refs.carTypeOpe.show(res);
				},
				//删除类型
				delCarType(res){
					 this.$Modal.confirm({
					    title:'删除？',
					    content:'确定要删除该类型吗？删除不可恢复',
					    onOk:()=>{
					        this.$http.post('/cartype/delete',{
					            id:res.row.typeId
					        }).then(res=>{
					            if(res.status==200){
					               this.$Modal.remove();
					                this.$Notice.warning({
					                     title: '删除成功'
					                 });
									 this.queryCarTypeList()
					            }
					        })
					    }
					})
				},
				//添加车辆品牌
				addCarBrand(){
					this.carBrand.modalType = 'add'
					this.$refs['carBrandOpe'].show()
				},
				//修改车辆类型
				editCarBrand(res){
					this.carBrand.modalType = 'edit'
					this.$refs.carBrandOpe.show(res);
				},
				delCarBrand(res){
					 this.$Modal.confirm({
					    title:'删除？',
					    content:'确定要删除该品牌吗？删除不可恢复',
					    onOk:()=>{
					        this.$http.post('/brand/delete',{
					            id:res.row.brandId
					        }).then(res=>{
					            if(res.status==200){
					               this.$Modal.remove();
					                this.$Notice.warning({
					                     title: '删除成功'
					                 });
									 this.queryCarBrandList()
					            }
					        })
					    }
					})
				},
				//查询类型列表
				queryCarTypeList() {
					this.$http.post('/cartype/list', this.carType.paramsType).then(res => {
						if (res.status == 200) {
							if (res.data.code == 200) {
								this.carType.totalType = res.data.data.total;
								this.carType.dataType = res.data.data.rows;
							}
						}
					});
				},
				//查询品牌列表
				queryCarBrandList(){
					this.$http.post('/brand/page/list', this.carBrand.paramsBrand).then(res => {
						if (res.status == 200) {
							if (res.data.code == 200) {
								this.carBrand.totalBrand = res.data.data.total;
								this.carBrand.dataBrand = res.data.data.rows;
							}
						}
					});
				},
				// 点击Tabs
				clickTabs(res) {
					this.tabsName = res;
					// 判断点击的标签
					switch (res) {
						case 'carType':
							// 查询类型列表
							this.queryCarTypeList();
							break;
						case 'carBrand':
							// 查询品牌列表
							this.queryCarBrandList();
							break;
					}
				},
				// 改变待审核当前页
				changeTypePage(res) {
					this.carType.paramsType.pageNo = res;
					this.queryCarTypeList();
				},
				// 改变待审核当前页容量
				changeTypeSizePage(res) {
					this.carType.paramsType.pageSize = res;
					this.queryCarTypeList();
				},
				// 改变已审核当前页
				changeBrandPage(res) {
					this.carBrand.paramsBrand.pageNo = res;
					this.queryCarBrandList();
				},
				// 改变已审核当前页容量
				changeBrandSizePage(res) {
					this.carBrand.paramsBrand.pageSize = res;
					this.queryCarBrandList();
				}
			}
		}
</script>

<style>
</style>
